import React, { useReducer } from 'react';

// 在组件base外边定义当前组件的状态(数据)count, 初始变量
const defaultState = {
    count: 0
}

// 定义一个reducer 纯函数去操作该变量
const reducer = (presatte, action) => {
    //参数1: presatte 为原数据 也就是defaultState ,
    //参数2: action 接收dispatch 派发的任务, 根据任务去修改 state数据

    // 注意: 不能直接修改原数据 defaultState, 而是只能修改新数据, 新数据就是将原数据拷贝一份, 
    // 接下来修改newState
    const newState = { ...presatte };
    switch (action.type) {
        case '+':
            newState.count++
            return newState
            break;
        case '-':
            newState.count -= action.payload
            return newState
            break;
        default: return newState
            break;
    }

}

const Base = () => {
    const [state, dispatch] = useReducer(reducer, defaultState);
    // useReducer 返回值为一个数组, 数组第一项就是初始定义的state 数据, 第二项就是dispath方法,
    // 用来修改state数据
    // console.log(1, useReducer(reducer, defaultState))
    return (
        <div>
            <p>使用后usereducer</p>
            <p>
                <button onClick={() => {
                    dispatch({ type: '-', payload: 10 })
                }}>-10</button>
                <span>{state.count}</span>
                <button onClick={() => {
                    dispatch({ type: '+' })
                }}>+1</button>
            </p>
        </div>
    );
}

export default Base;
